<template>
    <a-row>
        <a-input-search v-model:value="searchKey" placeholder="请输入仪器信息" style="width: 200px; margin-bottom: 10px;"
            @search="onSearch()" />
    </a-row>

    <a-table :rowKey="(record) => record.id" :row-selection="rowSelection" :dataSource="dataSource" :columns="columns"
        bordered :scroll="{ x: 1000 }" :pagination="false">
        <template #bodyCell="{ column, text, record }">
            {{ text }}
        </template>
    </a-table>
    <AntdZh>
        <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList } from "@/api/tool/instrument.js";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const total = ref(1)
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
// 定义表格列配置
const columns = [
  {
    title: "规格型号",
    dataIndex: "instrumentId",
    key: "instrumentId",
    fixed: 'left',
    width: 110,
  },
  {
    title: "仪器名称",
    dataIndex: "instrumentName",
    key: "instrumentName",
    width: 150,
  },
  {
    title: "装备类型",
    dataIndex: "instrumentType",
    key: "instrumentType",
    width: 90,
  },
  {
    title: "设备类别",
    dataIndex: "category",
    key: "category",
    width: 90,
  },
  {
    title: "主/子设备",
    dataIndex: "instrumentLevel",
    key: "instrumentLevel",
    width: 100,
  },
  {
    title: "装备系列",
    dataIndex: "instrumentSeries",
    key: "instrumentSeries",
    width: 90,
  },
  {
    title: "装备子系列",
    dataIndex: "instrumentChildSeries",
    key: "instrumentChildSeries",
    width: 110,
  },
  {
    title: "分类名称",
    dataIndex: "typeName",
    key: "typeName",
    width: 90,
  },
  {
    title: "外径(mm)",
    dataIndex: "outerDiameter",
    key: "outerDiameter",
    width: 90,
  },
  {
    title: "重量(kg)",
    dataIndex: "weight",
    key: "weight",
    width: 90,
  },
  {
    title: "有效长度(m)",
    dataIndex: "length",
    key: "length",
    width: 90,
  },
  {
    title: "纵向抗压力(kN)",
    dataIndex: "longitudinalPressure",
    key: "longitudinalPressure",
    width: 110,
  },
  {
    title: "纵向抗张力(kN)",
    dataIndex: "longitudinalTension",
    key: "longitudinalTension",
    width: 110,
  },
  {
    title: "抗扭力(N·M)",
    dataIndex: "torsionResistance",
    key: "torsionResistance",
    width: 90,
  },
  {
    title: "适合最大井眼(mm)",
    dataIndex: "maxWell",
    key: "maxWell",
    width: 120,
  },
  {
    title: "适合最小井眼(mm)",
    dataIndex: "minWell",
    key: "minWell",
    width: 120,
  },
  {
    title: "记录点(m)",
    dataIndex: "record",
    key: "record",
    width: 90,
  },
  {
    title: "耐温(℃)",
    dataIndex: "temperatureResistance",
    key: "temperatureResistance",
    width: 90,
  },
  {
    title: "运输长度(m)",
    dataIndex: "transportationLength",
    key: "transportationLength",
    width: 90,
  },
  {
    title: "耐压(MPa)",
    dataIndex: "voltageResistance",
    key: "voltageResistance",
    width: 90,
  },
  {
    title: "测井内容",
    dataIndex: "loggingContent",
    key: "loggingContent",
    width: 90,
  },
  {
    title: "制造厂商",
    dataIndex: "manufacturer",
    key: "manufacturer",
    width: 90,
  },
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });

const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        localStorage.setItem("selectInstruments", JSON.stringify(selectedRows));
    },
    getCheckboxProps: record => ({
        instrumentId: record.instrumentId,
    }),
};

/** 查询列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();

/** 搜索按钮操作 */
function onSearch() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id',
        searchKey: '',
    }
    getList();
}
</script>
  